<template>
    <div class="comment-item">
        <Avatar
            :userId="commentData.userId"
            :width="38"
        ></Avatar>
        <div class="comment-info">
            <div class="nick-name">
                <span
                    class="name"
                    @click="goToUCenter(commentData.userId)"
                >{{ commentData.nickName }}</span>
                <span
                    v-if="commentData.userId == articleUserId"
                    class="tag-author"
                >作者</span>
            </div>
            <div class="comment-content">

                <div>
                    <span
                        class="tag tag-topping"
                        v-if="commentData.topType == 1"
                    >置顶</span>
                    <span
                        class="tag tag-no-audit"
                        v-if="commentData.status == 0"
                    >待审核</span>
                    <span v-html="commentData.content"></span>
                </div>
                <CommentImage
                    class="cot-img"
                    v-if="commentData.imgPath"
                    :src="proxy.globalInfo.imageUrl + commentData.imgPath.replace('.', '_.')"
                    :imgList="[proxy.globalInfo.imageUrl + commentData.imgPath]"
                ></CommentImage>
            </div>
            <div class="op-panel">
                <div class="time">
                    <span>{{ commentData.postTime }}</span>
                    <span class="address">
                        &nbsp;·&nbsp;{{ commentData.userIpAddress }}
                    </span>
                </div>
                <div
                    :class="['iconfont icon-good', commentData.likeType == 1 ? 'active' : '']"
                    @click="doike(commentData)"
                >{{ commentData.goodCount > 0 ?
                    commentData.goodCount : '点赞' }}</div>
                <div
                    class="iconfont icon-comment"
                    @click="showReplyPanel(commentData, 0)"
                >回复</div>
                <el-dropdown v-if="articleUserId == currentUserId">
                    <div class="iconfont icon-more"></div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="opTop(commentData)">
                                {{ commentData.topType == 0 ? '设为置顶' : '取消置顶' }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div
                class="comment-sub-list"
                v-if="commentData.children"
            >
                <div
                    class="comment-sub-item"
                    v-for="sub in commentData.children"
                    :key="sub"
                >
                    <Avatar
                        :userId="sub.userId"
                        :width="30"
                    ></Avatar>
                    <div class="comment-sub-info">
                        <div class="nick-name">
                            <span
                                class="name"
                                @click="goToUCenter(sub.userId)"
                            >{{ sub.nickName }}</span>
                            <span
                                v-if="sub.userId == articleUserId"
                                class="tag-author"
                            >作者</span>
                            <span class="reply-name">回复</span>
                            <span
                                @click="goToUCenter(sub.userId)"
                                class="a-link"
                            >@{{ sub.replyNickName }}</span>
                            <span>：</span>
                            <span
                                class="sub-content"
                                v-html="sub.content"
                            ></span>
                            <div class="op-panel">
                                <div class="time">
                                    <span>{{ sub.postTime }}</span>
                                    <span class="address">
                                        &nbsp;·&nbsp;{{ sub.userIpAddress }}
                                    </span>
                                </div>
                                <div
                                    :class="['iconfont icon-good', sub.likeType == 1 ? 'active' : '']"
                                    @click="doike(sub)"
                                >{{
                                    sub.goodCount > 0 ? sub.goodCount
                                        : '点赞' }}
                                </div>
                                <div
                                    class="iconfont icon-comment"
                                    @click="showReplyPanel(sub, 1)"
                                >回复</div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div
                class="reply-info"
                v-if="commentData.showReply"
            >
                <PostCommon
                    :placeholderInfo="placeholderInfo"
                    :avatatWidth="30"
                    :userId="currentUserId"
                    :showInsertImg="false"
                    @postCommentFinish="postCommentFinish"
                    :articleId="articleId"
                    :pCommentId="pCommentId"
                    :replyUserId="replyUserId"
                >
                </PostCommon>
            </div>
        </div>
    </div>
</template>

<script setup>
import PostCommon from './PostCommon.vue';
import CommentImage from './CommentImage.vue';
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const { proxy } = getCurrentInstance();
const router = useRouter();
const props = defineProps({
    articleId: {
        type: String,
    },
    commentData: {
        type: Object,
    },
    articleUserId: {
        type: String,
    },
    currentUserId: {
        type: String,
    }
});

const api = {
    doLike: '/comment/doLike',
    changeTopType: '/comment/changeTopType',
};

// 提示信息
const placeholderInfo = ref("");

// 回复评论
const pCommentId = ref(0);
const replyUserId = ref(null);

// 显示回复框
const emit = defineEmits(["hiddenReply", "reloadData"]);
const showReplyPanel = (curData, type) => {
    let haveShow = props.commentData.showReply == undefined ? false : props.commentData.showReply;

    emit("hiddenReply");
    if (type == 0) {
        props.commentData.showReply = !haveShow;

    } else {
        props.commentData.showReply = true;
    }
    pCommentId.value = props.commentData.commentId;
    replyUserId.value = curData.userId;
    placeholderInfo.value = `回复 @${curData.nickName}：`;
};

// 作者
const goToUCenter = (userId) => {
    router.push(`/user/${userId}`);
}

// 评论发布成功
const postCommentFinish = (resultData) => {
    props.commentData.children = resultData;
}

// 点赞
const doike = async (data) => {
    let result = await proxy.Request({
        url: api.doLike,
        showLoading: false,
        params: {
            commentId: data.commentId
        }
    })
    if (!result) {
        return;
    }
    data.goodCount = result.data.goodCount;
    data.likeType = result.data.likeType;
}

// 置顶
const opTop = async (data) => {
    let result = await proxy.Request({
        url: api.changeTopType,
        params: {
            commentId: data.commentId,
            topType: data.topType == 0 ? 1 : 0
        }
    })
    if (!result) {
        return;
    }
    emit('reloadData');
}
</script>

<style lang="scss">
.comment-item {
    display: flex;
    padding: 10px 0;


    .comment-info {
        margin-left: 10px;
        width: 100%;
        border-bottom: 1px solid #ddd;
        padding-bottom: 15px;

        .nick-name {
            .name {
                font-size: 14px;
                color: var(--text2);
                margin-right: 10px;
                cursor: pointer;
            }

            .tag-author {
                padding: 0px 3px;
                font-size: 12px;
                color: #fff;
                background-color: var(--pink);
                border-radius: 2px;
            }

        }

        .comment-content {
            margin-top: 5px;
            font-size: 15px;
            line-height: 22px;

            .cot-img {
                margin-top: 10px;
            }

            .tag {
                margin-right: 5px;
                border-radius: 3px;
                padding: 0px 5px;
                font-size: 12px;
            }

            .tag-topping {
                color: var(--pink);
                border: 1px solid var(--pink);
            }

            .no-audit {
                color: var(--text2);
                border: 1px solid var(--text2);
            }
        }

        .op-panel {
            display: flex;
            margin-top: 10px;
            font-size: 13px;
            color: var(--text2);
            align-items: center;

            .time {
                margin-right: 20px;
            }

            .iconfont {
                margin-right: 15px;
                cursor: pointer;
                font-size: 14px;
                color: var(--icon);
            }

            .active {
                color: var(--link);
            }
        }

        .reply-info {
            margin-top: 15px;
        }

        .comment-sub-list {
            margin-top: 15px;

            .comment-sub-item {
                display: flex;
                margin: 10px 0px;

                .comment-sub-info {
                    margin-left: 5px;

                    .nick-name {
                        .reply-name {
                            margin: 0px 5px;
                        }
                    }
                }

            }
        }
    }
}

.el-textarea__inner {
    min-height: 60px !important;
}
</style>